<template>
  <div>
    <div class="">
      <!-- <FTablePage :columns="columns" :url="table" /> -->
      <fcTable ref="table" :columes="columes" :selection="false" :url="this.list" :deletUrl="universalUrl">
        <template v-slot:button>
          <el-button icon="el-icon-circle-plus-outline" type="primary" v-hasPermi="['system']"
            @click="add()">新增</el-button>
        </template>

         <!-- 表格行插槽 -->
         <template #tableTypeId="scope">
          <el-tag :type="scope.row.tableTypeId == 0 ? 'primary' : 'warning'">{{
            scope.row.tableTypeIdText
          }}</el-tag>
        </template>

        <template #operation="scope">
          <el-link type="primary" style="margin-right: 5px"  @click="edit(scope.row)">编辑</el-link>
        </template>
      </fcTable>
    </div>
    <tableDescEdit :title="title" :visible.sync="visible" :item="element" @Ok="addAndEdit"></tableDescEdit>
  </div>
</template>

<script>
import request from "@/utils/request";
import fcTable from "@/components/futureCloudMOM/fcTable";
import tableDescEdit from "./tableDescEdit";
export default {
  name: "TableDesc",
  components: { fcTable, tableDescEdit },
  data() {
    return {
      list: "sys/tableDesc/getList",
      universalUrl: "sys/tableDesc",
      columes: [
        {
          label: "表类别",
          key: "tableTypeId",
          visible: true,
          type: "slot",
          // search: true,
          dictCode: "sys_normal_disable",
        },
        {
          label: "表名",
          key: "tableName",
          visible: true,
        },
        {
          label: "表描述",
          key: "tableDesc",
          visible: true,
        },
        {
          label: "表描述英文",
          key: "tableDescEN",
          visible: true,
        },
        {
          label: "列名",
          key: "columnName",
          visible: true,
        },
        {
          label: "列描述",
          key: "columnDesc",
          visible: true,
        },
        {
          label: "列描述英文",
          key: "columnDescEN",
          visible: true,
        },
        {
          label: "列类型",
          key: "columnType",
          visible: true,
        },
        {
          label: "列长度",
          key: "columnLength",
          visible: true,
        },
        {
          label: "列默认值",
          key: "columnDefault",
          visible: true,
        },
        {
          label: "操作",
          key: "operation",
          //是否支持删除功能
          delete: true,
          //插槽需要的属性
          type: "slot",
          fixed: "right",
          //显隐列需要的属性
          visible: true,
          disabled: true,
          //不支持搜索 写入
          search: true,
        },
      ],
      //新增/编辑弹窗打开的标题
      title: "",
      //显隐
      visible: false,
      //数据
      element: {},
    };
  },
  created() { },
  methods: {
    getColumns: function () {
      get;
    },
    add() {
      this.element = null;
      this.title = "新增";
      this.visible = true;
    },

    edit(item) {
      console.log(item);
      this.element = item;
      this.title = "编辑";
      this.visible = true;
    },
    addAndEdit(item) {
      console.log(item);
      let method = "put";
      if (this.title === "新增") {
        method = "post";
      }
      request({
        url: this.universalUrl,
        method: method,
        data: item,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.$refs.table.getList();
        } else {
          this.$message.error(res.message);
          this.$refs.table.getList();
        }
      });
    },
  },
};
</script>

<style scoped></style>
